import React,{ Component } from 'react';
import { Form, Input, Icon, Button } from 'antd';
const FormItem = Form.Item;

let uuid = 0;
class AddComponent extends Component {
	constructor(props) {
		super(props);
		this.state = {

		}
	}
	addEvent() {
		console.log('添加')
		const { form } = this.props;
		const keys = form.getFieldValue('keys');
		const nextKeys = keys.concat(uuid);
		uuid++;
		form.setFieldsValue({
			keys: nextKeys,
		})

	}
	remove=(k)=> {
		console.log('删除')
		const { form } = this.props;
		const keys = form.getFieldValue('keys');
		if(keys.lenth === 1) {
			return;
		}
		form.setFieldsValue({
			keys: keys.filter(key=> key!==k)
		})
	}
	handleSubmit() {

	}
	render() {
		const { getFieldDecorator, getFieldValue } = this.props.form;
		getFieldDecorator('keys',{ initialValue: []})
		const keys = getFieldValue('keys');
		const formItems = keys.map((k,index)=>{
			return (
				<FormItem
					required={ false }
					key = { k }
				>
					{getFieldDecorator(`names[${k}]`,{
						validateTrigger: ['onBlur','onChange']
					})(
						<Input placeholder="请选择" />
					)}
					{keys.length > 1?(
						<Icon
							className="dynamic-delete-button"
							type="minus-circle-o"
							disabled = { keys.length === 1}
							onClick={ ()=>this.remove(k) }
							
						/>
					): null }
				</FormItem>
			)
		})
		return (
			<Form onSubmit={ this.handleSubmit.bind(this)}>
				<FormItem style={{ width: '60%' }}>
					{formItems}
					<Button type="dashed" onClick={ this.addEvent.bind(this)}>
						<Icon type="plus" />添加
					</Button>
				</FormItem>
				<FormItem>
					<Button type="primary" htmlType="submit">
						提交
					</Button>
				</FormItem>
			</Form>
		)
	}
}
export default AddComponent = Form.create()(AddComponent);